<template>
	<block>
		<view class="clickarea" @click.stop="showMenu">
			<slot>
				<text class="cuIcon-more lg text-gray" style="font-weight: bold;"></text>
			</slot>
		</view>
		<block v-if="mask">
			<view class="mask" @click="hideMenu"></view>
			<view :class="['menus', animationcl]" :style="{'top':top,'right':right,'left':left,'bottom':bottom}" @click="hideMenu">
				<slot name="items"></slot>
			</view>
		</block>
		<block v-else>
			<view style="display: none;">
				<slot name="items"></slot>
			</view>
		</block>
	</block>
</template>

<script>
	export default {
		name: "hxt-dropbutton",
		options: {
			styleIsolation: 'apply-shared'
		},
		data() {
			return {
				mask: false,
				left: 'auto',
				right: 'auto',
				top: 'auto',
				bottom: 'auto',
				animationcl: 'right-left'
			};
		},
		methods: {
			showMenu: function(e) {
				var _this = this,
					systemInfo = uni.getSystemInfoSync(),
					screenWidth = systemInfo.screenWidth,
					screenHeight = systemInfo.screenHeight,
					obj = uni.createSelectorQuery().in(_this).select('.clickarea');

				obj.boundingClientRect(function(data) {
					if (data.top >= screenHeight * 0.66) { //下面显示不下往上飘
						if (data.left >= screenWidth / 2) {
							_this.left = 'auto';
							_this.bottom = (screenHeight - data.bottom) / 2 + 'px';
							_this.top = 'auto';
							_this.right = (screenWidth - data.left) + 'px';
							_this.animationcl = 'right-left';
						} else {
							_this.left = (data.left + data.width) + 'px';
							_this.bottom = (screenHeight - data.bottom) / 2 + 'px';
							_this.top = 'auto';
							_this.right = 'auto';
							_this.animationcl = 'left-right';
						}
					} else {
						if (data.left >= screenWidth / 2) {
							_this.left = 'auto';
							_this.bottom = 'auto';
							_this.top = data.top + 'px';
							_this.right = (screenWidth - data.left) + 'px';
							_this.animationcl = 'right-left';
						} else {
							_this.left = (data.left + data.width) + 'px';
							_this.bottom = 'auto';
							_this.top = data.top + 'px';
							_this.right = 'auto';
							_this.animationcl = 'left-right';
						}
					}
					_this.mask = true;
				}).exec();
			},
			hideMenu: function() {
				this.mask = false;
			}
		}
	}
</script>

<style>
	.clickarea {
		padding: 6rpx;
		display: inline-block;
	}

	.mask {
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #FFF;
		opacity: 0.01;
	}

	.menus {
		position: fixed;
		display: inline-block;
		z-index: 1000;
		padding: 10rpx;
		box-sizing: border-box;
		background-color: transparent;
	}

	@keyframes scaleH {
		from {
			transform: scaleX(0);
		}

		to {
			transform: scaleX(100%);
		}
	}

	.right-left {
		transform-origin: 100% 50%;
		animation: scaleH 0.2s;
	}

	.left-right {
		transform-origin: 0 50%;
		animation: scaleH 0.2s;
	}
</style>